<template>
  <div>
    <el-card style="width: 70%">
      <el-form :rules="rules" ref="updateRef" @submit.native.prevent :model="loginUser" label-width="80px"
               style="width: 80%">
        <el-form-item label="" style="text-align: center">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/file/upload"
              :headers="{token:loginUser.token}"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload">

            <i v-if="!loginUser.avatar" class="el-icon-plus avatar-uploader-icon el-upload"></i>
            <el-image v-if="loginUser.avatar" :src="loginUser.avatar" class="avatar"></el-image>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginUser.username" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="loginUser.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="loginUser.phone" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="loginUser.address" placeholder=""></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" native-type="submit" @click="update">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import request from "@/utils/request";

export default defineComponent({
  name: "PersonView",
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem('user')) || {},
      rules: {
        phone: [{validator: this.validatePhone, trigger: 'blur'}]
      }
    }
  },
  methods: {
    validatePhone(rule, value, callback) {
      //中国大陆手机号码校验正则表达式
      const regex = /^1[3-9]\d{9}$|^$/;
      if (!regex.test(value)) {
        callback(new Error('电话号码格式不正确'))
      } else {
        callback()
      }
    },
    update() {
      this.$refs['updateRef'].validate(valid => {
        if (valid) {
          request.put('/user/update', this.loginUser).then(res => {
            if (res.code === '200') {
              //更新本地存储
              localStorage.setItem('user', JSON.stringify(this.loginUser))
              //将消息传递给父组件
              this.$emit('update:user')//,this.loginUser
              this.$message.success('保存成功')
            } else
              this.$message.error(res.msg)
          })
        }
      })

    },
    //头像上传成功后操作
    handleAvatarSuccess(res) {
      if (res.code === '200') this.loginUser.avatar = res.data
      else if (res.code === '401') {
        this.$message.error(res.msg)
        this.$router.push('/login')
      } else this.$message.error(res.msg)
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
})
</script>

<style scoped>
/deep/ .el-upload {
  border-radius: 50% !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}
</style>
